<template>
  <div class="two">
    <aside>
      <h4>题型</h4>
      <el-button @click="addQuestion('single')">单选</el-button>
      <el-button @click="addQuestion('multiple')">多选</el-button>
      <el-button>问答</el-button>
      <el-button>矩阵</el-button>
      <el-button>打分</el-button>
      <el-button>上传</el-button>
      <p v-for="(item, i) in list" :key="item.id">{{item}}</p>
    </aside>
    <div class="containner">
      主要内容
      <draggable tag="ul" :list="list" class="list-group" handle=".handle" @start="drag = true" @end="drag = false" v-bind="dragOptions">
        <transition-group type="transition" name="list" tag="p">
          <div v-for="(element, i) in list" :key="element.name">
            <!-- *************************单选题************************* -->
            <template v-if="element.type === 'single'">
              <Single @deleteQuestion="deleteQuestion" @click.native="handleClick(element)" :class="{default:true, active: element.id === currentData.id}" :element="element" :i="i" @send="updateList"></Single>
            </template>
            <!-- *************************多选题************************* -->
            <template v-if="element.type === 'multiple'">
              <Multiple @deleteQuestion="deleteQuestion" @click.native="handleClick(element)" :class="{default:true, active: element.id === currentData.id}" :element="element" :i="i" @send="updateList"></Multiple>
            </template>
          </div>
        </transition-group>
      </draggable>
    </div>
    <div class="implements">
      <transition name="fade">
        <div v-if="isShow" class="implements-containner">
          <h6>工具</h6>
          <div>
            <el-switch style="display: block" @change="changeRequire" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费">
            </el-switch>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
let id = 3
import draggable from 'vuedraggable'
import Single from "@/components/Single.vue";
import Multiple from "@/components/Multiple.vue";
export default {
  components: {
    draggable,
    Single,
    Multiple
  },
  name: 'two',
  data () {
    return {
      isShow: false,
      value2: true,
      currentData: {},
      list: [
        { require: true, type: "single", name: "John", text: "", id: 0 },
        { require: false, type: "single", name: "Joao", text: "", id: 1 },
        { require: true, type: "multiple", name: "Jean", text: "", id: 2 }
      ],
      // dragging: false,
      drag: false
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  watch: {
    // 根据当有是否选中，控制工具的显隐
    currentData (val) {
      if (val.name) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  mounted () {
    // window.addEventListener('scroll', (val) => {
    //   var el = document.querySelector('.implements-containner')
    //   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //   if (scrollTop > 78) {
    //     console.log(el.style);
    //     el.style.position = 'fixed'
    //   }
    // })
  },
  methods: {
    changeRequire (val) {
      console.log(val);
      console.log(this.currentData);
      // 处理数据
      // var index = this.list.findIndex(item => {
      //   return item.id === this.currentData.id
      // })
      var arr = this.list.map(item => {
        if (item.id === this.currentData.id) {
          return {...item, require: val}
        } else {
          return item
        }
      })
      this.list = arr

    },
    // 统一的方法删除一个题，根据id直接删除数组
    deleteQuestion (val) {
      // 如果当前选中的在list中的索引等于删除的索引，则隐藏工具栏。val是删除的索引, 比较得是索引，
      var index = this.list.findIndex((item) => {
        return item.id === this.currentData.id
      })
      console.log(index, val);
      if (index === val) {
        this.currentData = {}
      }
      this.list.splice(val, 1);
    },
    // 统一的方法加一个题，根据加得类型不同加不同的题
    addQuestion (val) {
      id++
      this.list.push({ type: val, name: "AAA " + id, id, text: "" });
    },
    handleClick (val) {
      this.currentData = val
      this.value2 = this.currentData.require
      // console.log(val);
    },
    updateList (val, val2) {
      console.log(val, val2);
      this.list[val] = { ...this.list[val], ...val2 }
      console.log(this.list[val]);

    },
    removeAt () {

    }
  }
}
</script>

<style lang="scss" scoped>
.two {
  background: #eee;
  width: 100%;
  display: flex;
  justify-content: center;
}
aside {
  background: chartreuse;
  width: 195px;
}
.containner {
  width: 760px;
}
.implements {
  position: sticky;
  top: 0;
  background: coral;
  width: 195px;
}
.default {
  border: 1px solid rgba($color: #000000, $alpha: 0);
}
.active {
  border: 1px solid black;
}
.implements-containner {
  background: turquoise;
  margin: 10px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>